// 主题可修改样式（.theme(编辑区背景，标题颜色，标题背景，标题边框，预览区背景， 预览区（工具栏）字体，工具栏背景，工具栏字体颜色)）
.theme(@backcolor:rgb(246, 247, 249),@top_title_color:darkseagreen, @top_title_background:lightgoldenrodyellow,
    @top_title_border:#ccc, @preview_backgroud:#ccc, @preview_color: #2c3e50,@tool_backgroud: #fff, @tool_color:#ccc, @tool_border:#ccc)
{
  .top-title{
    color: @top_title_color;
    background: @top_title_background;
    border-bottom: 1px @top_title_border solid;
    box-shadow: 2px 2px 2px @top_title_border;
  }
  .top-title h1 {
    line-height: 80px;
  }

  // 编辑区控件
  textarea.ivu-input {
    background-color: @backcolor;
  }
  .editor { // 编辑区
    background-color: @backcolor;
  }
  .preview { // 预览区
    background: @preview_backgroud;
  }

  background: @tool_backgroud;
  color: @preview_color;

  // 工具栏
  .header {
    background: @tool_backgroud;
    border-bottom: 1px @tool_color solid;
    box-shadow: 2px 2px 2px @tool_border;
    .m_action_item {
      &:hover {
        color: rgb(11, 155, 212);
      }
    }
  }
}

// 以下为通用样式
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    overflow-y:hidden;  // 禁止显示滚动条
  }

  .top-title{
    width: 100%;
    background: none;   
    text-align: center;
    margin-bottom: 10px;
  }
  .top-title h1 {
    line-height: 80px;
  }

  // 修改默认滚动条样式
  /*滚动条样式*/
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块样式*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);  // Google 
    background: #06c5d2;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道样式*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  textarea.ivu-input {
    height: 100% !important;
    border: none;
    font-size: 18px;
    &:focus {
      box-shadow: none;
    }
  }
  .task-list {
    list-style: none;
  }
  #app {
    height: 100%;
    .g_editor_container {
      height: calc(100% - 136px);
    }
    .editor,
    .preview {
      width: 50%;
      height: 100%;
      padding: 5px 0 0 15px;
      float: left;
      overflow: auto;
      font-size: 18px;
      &::before {
        content: '编码区';
        font-size: 20px;
        font-weight: 800;
      }
      .textarea {
        height: calc(100% - 40px);
      }
    }
    .preview {
      padding-left: 30px;
      font-size: 15px;
      font-weight: 400;
      padding-bottom: 30px;
      &::before {
        content: '';
      }
    }
  }

  // 工具栏
  .header {
    height: 56px;
    line-height: 56px;
    .center {
      text-align: center;
    } 
    .m_action_item {
      cursor: pointer;
      &:hover {
        font-weight: 900;
      }
    }
  }
